<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/metrize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/polaris/polaris.css" rel="stylesheet">
    <link href="css/square/blue.css" rel="stylesheet">
    <link href="css/bootstrap-datepicker3.min.css" rel="stylesheet">
    <link href="css/bootstrap.colorpickersliders.min.css" rel="stylesheet">
    <link href="css/jquery.typeahead.min.css" rel="stylesheet">
    <link href="css/bootstrap-wysihtml5.css" rel="stylesheet">
    <link href="css/bootstrap-submenu.css" rel="stylesheet">
    <link href="css/jquery.tagsinput.min.css" rel="stylesheet">
    <link href="css/select2.css" rel="stylesheet">
    <link href="css/bootstrap-editable.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header class="header-content header-fixed bg-white clearfix">
    <!--  Logo -->
    <div class="logo bg-dark">
        <a href="#"><span class="logo-icon fa fa-th-large"></span> <span class="logo-text">JP</span></a>
    </div>

    <div class="top-nav">
        <ul class="list-none nav-left">
            <!-- to left menu -->
            <li class="unshow"><a class="toggle-min jp-gray jp-ripple" href="#"><i class="fa fa-bars"></i></a></li>
            <!-- dropdown settings -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown" id="dropdownMenu2"><i class="fa fa-gear"></i></a>
                <div class="dropdown-menu panel panel-default with-arrow" aria-labelledby="dropdownMenu2">
                    <div class="panel-heading"><span>Setting</span></div>
                    <ul class="list-group">
                        <li class="list-group-item">
                            <p>User setting</p>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                            <div class="checkbox-inline">
                                <label>
                                    <input type="checkbox"> Check me out
                                </label>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <p>User setting</p>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option1"> 2
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option1"> 3
                            </label>
                        </li>
                    </ul>
                </div>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-truck"></i></a></li>
        </ul>

        <ul class="list-none nav-right pull-right">
            <!-- user info-->
            <li class="nav-profile dropdown">
                <a href="#" class="dropdown-toggle jp-gray jp-ripple" data-toggle="dropdown"><img src="img/t.jpg" class="img-circle img30_30" /> <span class="hidden-xs">LISA</span></a>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#"><i class="fa fa-dashboard"></i>Action</a></li>
                    <li><a href="#"><i class="fa fa-television"></i>Another action</a></li>
                    <li><a href="#"><i class="fa fa-file-o"></i>Something else here</a></li>
                    <li><a href="#"><i class="fa fa-table"></i>Separated link</a></li>
                </ul>
            </li>
            <li><a href="#" class="jp-gray jp-ripple"><i class="fa fa-wifi"></i></a></li>
        </ul>
    </div>

</header>
<div class="main-content">
    <!-- left nav -->
    <div class="nav-content bg-dark nav-vertical">
        <ul class="left-menu list-none">
            <li class="user-info">
                <div class="user-panel">
                    <div class="pull-left">
                        <img src="img/t.jpg" class="img-circle img45_45"/>
                    </div>
                    <div class="pull-left info">
                        <p>welcome,admin</p>
                        <a href="#"><i class="fa fa-circle"></i> online</a>
                    </div>
                </div>
                <form class="search-form">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" />
                        <span class="input-group-btn">
                            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i></button>
                        </span>
                    </div>
                </form>
            </li>
            <li class="treeview ">
                <a href="main.html" class="jp-ripple"><i class="fa fa-dashboard"></i><span>Dashboard</span></a>
            </li>
            <li class="treeview active">
                <a href="#" class="jp-ripple"><i class="fa fa-television"></i><span>JP UI</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Buttons.html" ><i class="fa fa-circle ng-scope"></i><span>Buttons</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Icons.html" ><i class="fa fa-circle ng-scope"></i><span>Icons</span></a></li>
                    <li class="jp-ripple"><a href="Typography.html" ><i class="fa fa-circle ng-scope"></i><span>Typography</span></a></li>
                    <li class="jp-ripple"><a href="Lists.html" ><i class="fa fa-circle ng-scope"></i><span>Lists</span></a></li>
                    <li class="active jp-ripple"><a href="Forms.html" ><i class="fa fa-circle ng-scope"></i><span>Forms</span></a></li>
                    <li class="jp-ripple"><a href="Components.html" ><i class="fa fa-circle ng-scope"></i><span>Components</span></a></li>
                    <li class="jp-ripple"><a href="Panels.html"><i class="fa fa-circle ng-scope"></i><span>Panels</span></a></li>
                    <li class="jp-ripple"><a href="Grids.html"><i class="fa fa-circle ng-scope"></i><span>Grids</span></a></li>
                    <li class="jp-ripple"><a href="Timeline.html"><i class="fa fa-circle ng-scope"></i><span>Timeline</span></a></li>
                    <li class="jp-ripple"><a href="Tree.html"><i class="fa fa-circle ng-scope"></i><span>Tree</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-file-o"></i><span>Pages</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="SignIn.html"><i class="fa fa-circle ng-scope"></i><span>Sign In</span><span class="badge badge-info ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="SignUp.html"><i class="fa fa-circle ng-scope"></i><span>Sign Up</span></a></li>
                    <li class="jp-ripple"><a href="ForgotPassword.html"><i class="fa fa-circle ng-scope"></i><span>Forgot Password</span></a></li>
                    <li class="jp-ripple"><a href="404.html"><i class="fa fa-circle ng-scope"></i><span>404 Error</span></a></li>
                    <li class="jp-ripple"><a href="500.html"><i class="fa fa-circle ng-scope"></i><span>500 Error</span></a></li>
                    <li class="jp-ripple"><a href="Blank.html"><i class="fa fa-circle ng-scope"></i><span>Blank Page</span></a></li>
                    <li class="jp-ripple"><a href="Profile.html"><i class="fa fa-circle ng-scope"></i><span>Profile</span></a></li>
                    <li class="jp-ripple"><a href="Invoice.html"><i class="fa fa-circle ng-scope"></i><span>Invoice</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-table"></i><span>Tables</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="Basetable.html"><i class="fa fa-circle ng-scope"></i><span>Base Table</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="Responsivetables.html"><i class="fa fa-circle ng-scope"></i><span>Responsive Tables</span></a></li>
                    <li class="jp-ripple"><a href="DataTables.html"><i class="fa fa-circle ng-scope"></i><span>Data Tables</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-pencil"></i><span>Forms</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="FormComponents.html"><i class="fa fa-circle ng-scope"></i><span>Form Components</span><span class="badge badge-warning ng-scope">10</span></a></li>
                    <li class="jp-ripple"><a href="WizardForm.html"><i class="fa fa-circle ng-scope"></i><span>Wizard Form</span></a></li>
                </ul>
            </li>
            <li class="treeview">
                <a href="#" class="jp-ripple"><i class="fa fa-bar-chart"></i><span>Charts</span><i class="fa fa-angle-down icon-has-ul"></i></a>
                <ul class="treeview-menu">
                    <li class="jp-ripple"><a href="EChartsLine.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Line</span></a></li>
                    <li class="jp-ripple"><a href="EChartsBar.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Bar</span><span class="badge badge-primary ng-scope">5</span></a></li>
                    <li class="jp-ripple"><a href="EChartsPie.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Pie</span></a></li>
                    <li class="jp-ripple"><a href="EChartsScatter.html"><i class="fa fa-circle ng-scope"></i><span>ECharts Scatter</span></a></li>
                </ul>
            </li>
            <li class="menu-divider"></li>
            <li class="nav-title">
                <span>Title</span>
            </li>
            <li class="li-sm active">
                <a href="#"><i class="fa fa-circle color-info"></i><span>JP Components</span></a>
            </li>
            <li class="li-sm treeview">
                <a href="#"><i class="fa fa-circle color-success"></i><span>JP Elements</span></a>
            </li>
        </ul>

    </div>
    <!-- content -->
    <div class="content">
        <section class="jppage">
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Form Elements</h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">
                            <div class="row mb25">
                                <div class="col-md-8">
                                    <input class="jp-input" placeholder="Input">
                                </div>
                                <div class="col-md-4">
                                    <input class="jp-input" placeholder="Disable" disabled>
                                </div>
                            </div>
                            <div class="row mb25">
                                <div class="col-md-4">
                                    <div class="prepend-icon">
                                        <input type="text" class="jp-input" placeholder="Input icon left" />
                                        <span class="jp-icon"><i class="fa fa-user"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="append-icon">
                                        <input type="email" class="jp-input" placeholder="Input Email" />
                                        <span class="jp-icon"><i class="fa fa-envelope-o"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="prepend-icon">
                                        <input type="text" class="jp-input" placeholder="Disabled Search input" disabled />
                                        <span class="jp-icon"><i class="fa fa-search"></i></span>
                                    </div>
                                </div>

                            </div>

                            <div class="row mb25">
                                <div class="col-md-4">
                                    <div class="prepend-icon">
                                        <input type="url" class="jp-input" placeholder="Input Url" />
                                        <span class="jp-icon"><i class="fa fa-link"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="append-icon">
                                        <input type="text" class="jp-input" placeholder="Input icon right" />
                                        <span class="jp-icon"><i class="fa fa-user"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="prepend-icon">
                                        <input type="text" class="jp-input" placeholder="Input icon left Disable" disabled />
                                        <span class="jp-icon"><i class="fa fa-user"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb25">
                                <div class="col-md-4">
                                    <div class="jp-select">
                                        <select  name="country">
                                            <option value="">Select with single arrow</option>
                                            <option value="AL">Option #1</option>
                                            <option value="DZ">Option #2</option>
                                        </select>
                                        <i class="arrow"></i>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="jp-select">
                                        <select name="country">
                                            <option value="">Select with single arrow</option>
                                            <option value="AL">Option #1</option>
                                            <option value="DZ">Option #2</option>
                                        </select>
                                        <i class="arrow double"></i>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="jp-select">
                                        <select name="country" disabled>
                                            <option value="">Select with single arrow</option>
                                            <option value="AL">Option #1</option>
                                            <option value="DZ">Option #2</option>
                                        </select>
                                        <i class="arrow double"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="row mb25">
                                <div class="col-md-8">
                                    <div class="prepend-icon">
                                        <textarea class="jp-textarea" placeholder="Text area"></textarea>
                                        <label class="jp-icon">
                                            <i class="fa fa-list"></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="prepend-icon">
                                        <textarea class="jp-textarea" disabled placeholder="Text area Disable"></textarea>
                                        <label class="jp-icon">
                                            <i class="fa fa-list"></i>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb25">
                                <div class="col-md-4">
                                    <div class="jp-i-group jp-i-primary">
                                        <label>First name</label>
                                        <input class="jp-i-input" />
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="jp-i-group jp-i-danger">
                                        <label>Last Name</label>
                                        <input class="jp-i-input" />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="jp-i-group">
                                        <div class="jp-i-select">
                                            <select name="country">
                                                <option value="">Select with single arrow</option>
                                                <option value="AL">Option #1</option>
                                                <option value="DZ">Option #2</option>
                                            </select>
                                            <i class="arrow"></i>
                                        </div>
                                    </div>


                                </div>
                            </div>

                            <div class="row mb25">
                                <div class="col-md-4">
                                    <div class="jp-i-group jp-i-system">
                                        <label><i class="fa fa-envelope-o"></i></label>
                                        <input class="jp-i-input" />
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="jp-i-group jp-i-primary">
                                        <label><i class="fa fa-user"></i></label>
                                        <input class="jp-i-input" />
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="jp-i-group">
                                        <label><i class="fa fa-link"></i></label>
                                        <input class="jp-i-input" />
                                    </div>
                                </div>

                            </div>
                            <div class="row mb25">
                                <div class="col-md-12">
                                    <div class="jp-i-group">
                                        <label>File Upload</label>
                                        <input type="file" />
                                        <input class="jp-i-input" />
                                    </div>
                                </div>
                            </div>
                            <div class="row mb25">
                                <div class="col-md-12">
                                    <div class="jp-i-group">
                                        <textarea class="jp-i-input panel-success" placeholder="Textarea"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb25">
                                <div class="col-md-12">
                                    <div class="jp-i-group">
                                        <input type="text" id="jptags" class="jp-i-input" placeholder="Tags" />
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-lg-8 clearfix">
                    <h2 class="section-header">Sub Menu</h2>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="jp-panel">
                        <div class="panel-body">
                            <div class="col-lg-4">
                                <div class="dropdown m-b">
                                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="">
                                        Dropdown <span class="caret"></span>
                                    </button>

                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu">
                                            <a tabindex="0">Action</a>

                                            <ul class="dropdown-menu">
                                                <li><a tabindex="0">Sub action</a></li>
                                                <li class="dropdown-submenu">
                                                    <a tabindex="0">Another sub action</a>

                                                    <ul class="dropdown-menu">
                                                        <li><a tabindex="0">Sub action</a></li>
                                                        <li><a tabindex="0">Another sub action</a></li>
                                                        <li><a tabindex="0">Something else here</a></li>
                                                    </ul>
                                                </li>
                                                <li><a tabindex="0">Something else here</a></li>
                                                <li class="dropdown-submenu">
                                                    <a tabindex="0">Another action</a>

                                                    <ul class="dropdown-menu">
                                                        <li><a tabindex="0">Sub action</a></li>
                                                        <li><a tabindex="0">Another sub action</a></li>
                                                        <li><a tabindex="0">Something else here</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="dropdown-header">Dropdown header</li>
                                        <li class="dropdown-submenu">
                                            <a tabindex="0">Another action</a>

                                            <ul class="dropdown-menu">
                                                <li><a tabindex="0">Sub action</a></li>
                                                <li><a tabindex="0">Another sub action</a></li>
                                                <li><a tabindex="0">Something else here</a></li>
                                            </ul>
                                        </li>
                                        <li><a tabindex="0">Something else here</a></li>
                                        <li class="dropdown-divider">
                                            <div class="divider"></div>
                                        </li>
                                        <li><a tabindex="0">Separated link</a></li>
                                    </ul>

                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="btn-group">
                                    <button class="btn btn-default" type="button">Dropdown</button>
                                    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
                                        <span class="caret"></span>
                                    </button>

                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu">
                                            <a tabindex="0">Action</a>

                                            <ul class="dropdown-menu">
                                                <li><a tabindex="0">Sub action</a></li>
                                                <li class="dropdown-submenu">
                                                    <a tabindex="0">Another sub action</a>

                                                    <ul class="dropdown-menu">
                                                        <li><a tabindex="0">Sub action</a></li>
                                                        <li><a tabindex="0">Another sub action</a></li>
                                                        <li><a tabindex="0">Something else here</a></li>
                                                    </ul>
                                                </li>
                                                <li><a tabindex="0">Something else here</a></li>
                                                <li class="dropdown-submenu">
                                                    <a tabindex="0">Another action</a>

                                                    <ul class="dropdown-menu">
                                                        <li><a tabindex="0">Sub action</a></li>
                                                        <li><a tabindex="0">Another sub action</a></li>
                                                        <li><a tabindex="0">Something else here</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="dropdown-header">Dropdown header</li>
                                        <li class="dropdown-submenu">
                                            <a tabindex="0">Another action</a>

                                            <ul class="dropdown-menu">
                                                <li><a tabindex="0">Sub action</a></li>
                                                <li><a tabindex="0">Another sub action</a></li>
                                                <li><a tabindex="0">Something else here</a></li>
                                            </ul>
                                        </li>
                                        <li><a tabindex="0">Something else here</a></li>
                                        <li class="dropdown-divider">
                                            <div class="divider"></div>
                                        </li>
                                        <li><a tabindex="0">Separated link</a></li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="dropup m-b">
                                    <button class="btn btn-default" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
                                        Dropup <span class="caret"></span>
                                    </button>

                                    <ul class="dropdown-menu">
                                        <li class="dropdown-submenu">
                                            <a tabindex="0">Action</a>

                                            <ul class="dropdown-menu">
                                                <li><a tabindex="0">Sub action</a></li>
                                                <li class="dropdown-submenu">
                                                    <a tabindex="0">Another sub action</a>

                                                    <ul class="dropdown-menu">
                                                        <li><a tabindex="0">Sub action</a></li>
                                                        <li><a tabindex="0">Another sub action</a></li>
                                                        <li><a tabindex="0">Something else here</a></li>
                                                    </ul>
                                                </li>
                                                <li><a tabindex="0">Something else here</a></li>
                                                <li class="dropdown-submenu">
                                                    <a tabindex="0">Another action</a>

                                                    <ul class="dropdown-menu">
                                                        <li><a tabindex="0">Sub action</a></li>
                                                        <li><a tabindex="0">Another sub action</a></li>
                                                        <li><a tabindex="0">Something else here</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="dropdown-header">Dropdown header</li>
                                        <li class="dropdown-submenu">
                                            <a tabindex="0">Another action</a>

                                            <ul class="dropdown-menu">
                                                <li><a tabindex="0">Sub action</a></li>
                                                <li><a tabindex="0">Another sub action</a></li>
                                                <li><a tabindex="0">Something else here</a></li>
                                            </ul>
                                        </li>
                                        <li><a tabindex="0">Something else here</a></li>
                                        <li class="dropdown-divider">
                                            <div class="divider"></div>
                                        </li>
                                        <li><a tabindex="0">Separated link</a></li>
                                    </ul>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Radio&&Checkbox</h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="dk-panel panel-default bg-dark panel-labeled">
                        <div class="panel-body icheck">
                            <div class="row">
                                <div class="col-md-4">
                                    <ul class="list-none">
                                        <li><input type="checkbox"><label for="input-3">Checkbox 1</label></li>
                                        <li><input type="checkbox" checked><label for="input-3">Checkbox 2</label></li>
                                        <li><input type="checkbox" disabled><label for="input-3">Disabled</label></li>
                                        <li><input type="checkbox" checked disabled><label for="input-3">Disabled & checked</label></li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-none">
                                        <li><input type="radio" name="radio"><label for="input-3">Radio button 1</label></li>
                                        <li><input type="radio" name="radio" checked><label for="input-3">Radio button 2</label></li>
                                        <li><input type="radio" disabled><label for="input-3">Disabled</label></li>
                                        <li><input type="radio" checked disabled><label for="input-3">Disabled & checked</label></li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-none">
                                        <li>
                                            <div class="state icheckbox_polaris"></div>
                                            <div class="state iradio_polaris"></div>
                                            <label>Normal</label>
                                        </li>
                                        <li>
                                            <div class="state icheckbox_polaris hover"></div>
                                            <div class="state iradio_polaris hover"></div>
                                            <label>Hover</label>
                                        </li>
                                        <li>
                                            <div class="state icheckbox_polaris checked"></div>
                                            <div class="state iradio_polaris checked"></div>
                                            <label>Checked</label>
                                        </li>
                                        <li>
                                            <div class="state icheckbox_polaris disabled"></div>
                                            <div class="state iradio_polaris disabled"></div>
                                            <label>Disabled</label>
                                        </li>
                                        <li>
                                            <div class="state icheckbox_polaris checked disabled"></div>
                                            <div class="state iradio_polaris checked disabled"></div>
                                            <label>Disabled &amp; checked</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default panel-labeled bcheck">
                        <div class="panel-body icheck">
                            <div class="row">
                                <div class="col-md-4">
                                    <ul class="list-none list">
                                        <li><input type="checkbox"><label for="input-3">Checkbox 1</label></li>
                                        <li><input type="checkbox" checked><label for="input-3">Checkbox 2</label></li>
                                        <li><input type="checkbox" disabled><label for="input-3">Disabled</label></li>
                                        <li><input type="checkbox" checked disabled><label for="input-3">Disabled & checked</label></li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-none list">
                                        <li><input type="radio" name="radio"><label for="input-3">Radio button 1</label></li>
                                        <li><input type="radio" name="radio" checked><label for="input-3">Radio button 2</label></li>
                                        <li><input type="radio" disabled><label for="input-3">Disabled</label></li>
                                        <li><input type="radio" checked disabled><label for="input-3">Disabled & checked</label></li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <ul class="list-none list">
                                        <li>
                                            <div class="state icheckbox_square-blue"></div>
                                            <div class="state iradio_square-blue"></div>
                                            <label>Normal</label>
                                        </li>
                                        <li>
                                            <div class="state icheckbox_square-blue hover"></div>
                                            <div class="state iradio_square-blue hover"></div>
                                            <label>Hover</label>
                                        </li>
                                        <li>
                                            <div class="state icheckbox_square-blue checked"></div>
                                            <div class="state iradio_square-blue checked"></div>
                                            <label>Checked</label>
                                        </li>
                                        <li>
                                            <div class="state icheckbox_square-blue disabled"></div>
                                            <div class="state iradio_square-blue disabled"></div>
                                            <label>Disabled</label>
                                        </li>
                                        <li>
                                            <div class="state icheckbox_square-blue checked disabled"></div>
                                            <div class="state iradio_square-blue checked disabled"></div>
                                            <label>Disabled &amp; checked</label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">

                                <div class="pick-check pick-success">
                                    <input type="radio" name="pick" checked />
                                    <div class="pick-view">pick-success<span class="fa fa-check"></span></div>
                                </div>
                            <div class="pick-check pick-dark">
                                <input type="radio" name="pick" />
                                <div class="pick-view">pick-dark<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check">
                                <input type="radio" name="pick" />
                                <div class="pick-view">pick-check<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-danger">
                                <input type="radio" name="pick" />
                                <div class="pick-view">pick-danger<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-primary">
                                <input type="radio" name="pick" />
                                <div class="pick-view">pick-primary<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-info">
                                <input type="radio" name="pick" />
                                <div class="pick-view">pick-info<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-warning">
                                <input type="radio" name="pick" />
                                <div class="pick-view">pick-warning<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-alert">
                                <input type="radio" name="pick" />
                                <div class="pick-view">pick-alert<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-system">
                                <input type="radio" name="pick" />
                                <div class="pick-view">pick-system<span class="fa fa-check"></span></div>
                            </div>
                            <div class="panel-label">Radio</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default panel-labeled">
                        <div class="panel-body">

                            <div class="pick-check pick-success">
                                <input type="checkbox"  checked />
                                <div class="pick-view">pick-success<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-dark">
                                <input type="checkbox"  />
                                <div class="pick-view">pick-dark<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check">
                                <input type="checkbox"  />
                                <div class="pick-view">pick-check<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-danger">
                                <input type="checkbox"  />
                                <div class="pick-view">pick-danger<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-primary">
                                <input type="checkbox" name="pick" />
                                <div class="pick-view">pick-primary<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-info">
                                <input type="checkbox"  />
                                <div class="pick-view">pick-info<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-warning">
                                <input type="checkbox" />
                                <div class="pick-view">pick-warning<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-alert">
                                <input type="checkbox"  />
                                <div class="pick-view">pick-alert<span class="fa fa-check"></span></div>
                            </div>
                            <div class="pick-check pick-system">
                                <input type="checkbox"  />
                                <div class="pick-view">pick-system<span class="fa fa-check"></span></div>
                            </div>
                            <div class="panel-label">Multiselect</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Toggle Switches&&Slider</h2>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default panel-labeled jswitch-pannel">
                    <div class="panel-body">
                        <div class="col-md-4">
                            <ul class="list-none">
                                <li> <input type="checkbox" class="jpswitch jpswitch-small" /></li>
                                <li> <input type="checkbox" class="jpswitch" /></li>
                                <li> <input type="checkbox" class="jpswitch jpswitch-large" /></li>
                            </ul>
                        </div>

                        <div class="col-md-4">
                            <ul class="list-none">
                                <li class="mb25"><div class="slider slider-primary"></div></li>
                                <li class="mb25"> <div class="slider2 slider-info"></div></li>
                                <li class="mb25"> <div class="slider2 slider-warning"></div></li>
                                <li class="mb25"> <div class="slider2 slider-system"></div></li>
                                <li class="mb25"> <div class="slider2 slider-success"></div></li>
                            </ul>
                        </div>


                    </div>
                </div>
            </div>

            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Autocomplete</h2>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default panel-labeled">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="typeahead-container">
                                    <div class="typeahead-field">
                                        <div class="append-icon typeahead-query">
                                            <input class="jp-input autocomplete" placeholder="Input">
                                            <span class="jp-icon"><i class="fa fa-search"></i></span>
                                        </div>
                                    </div>

                                </div>


                            </div>
                            <div class="col-md-4">
                                <div class="typeahead-container">
                                    <div class="typeahead-field">
                                        <div class="append-icon typeahead-query">
                                            <input class="jp-input autocomplete1" placeholder="Input" name="beer_v1[query]">
                                            <span class="jp-icon"><i class="fa fa-search"></i></span>
                                        </div>
                                    </div>

                                </div>


                            </div>
                            <div class="col-md-4">
                                <div class="typeahead-container">
                                    <div class="typeahead-field">
                                        <div class="append-icon typeahead-query">
                                            <input class="jp-input autocomplete3" placeholder="Input">
                                            <span class="jp-icon"><i class="fa fa-search"></i></span>
                                        </div>
                                    </div>

                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Rating</h2>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-12 color-success size-h4 rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 color-info size-h3 rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 color-danger size-h2 rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12 color-primary size-h1 rating">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-o"></i>
                                <i class="fa fa-star-o"></i>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Editor</h2>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default panel-labeled">
                    <div class="panel-body">
                        <textarea id="some-textarea" class="jp-textarea" placeholder="Enter text ..."></textarea>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 clearfix">
                <h2 class="section-header">Datepicker && Color Picker</h2>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default panel-labeled">
                    <div class="panel-body">
                        <div class="form-group">
                            <div class="input-group date">
                                <input class="form-control" />
                                <div class="input-group-addon"><span class="fa fa-calendar"></span></div>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="prepend-icon" data-date-format="yyyy-mm-dd">
                                <input class="jp-input date" placeholder="yyyy-mm-dd" />
                                <span class="jp-icon">
                                    <i class="fa fa-calendar"></i>
                                </span>

                            </div>

                        </div>

                        <div class="form-group">
                            <div class="input-group">
                                <input class="form-control color" />
                                <label>Color Picker 1</label>
                            </div>

                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <input class="form-control color2" />
                                <label>Color Picker 2</label>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-8 clearfix">
                <h2 class="section-header">X-editable</h2>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default panel-labeled">
                    <div class="panel-body">
                        <table class="table table-bordered table-striped">
                            <tbody>
                            <tr>
                                <td width="35%">Simple text field</td>
                                <td width="65%"><a href="#" id="username" data-type="text" data-pk="1" data-title="Enter username" class="editable editable-click">superuser</a></td>
                            </tr>
                            <tr>
                                <td>Empty text field, required</td>
                                <td><a href="#" id="firstname" data-type="text" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter your firstname" class="editable editable-click editable-empty">Empty</a></td>
                            </tr>
                            <tr>
                                <td>Select, local array, custom display</td>
                                <td><a href="#" id="sex" data-type="select" data-pk="1" data-value="" data-title="Select sex" class="editable editable-click" style="color: gray;">not selected</a></td>
                            </tr>
                            <tr>
                                <td>Select, remote array, no buttons</td>
                                <td><a href="#" id="group" data-type="select" data-pk="1" data-value="5" data-source="/#" data-title="Select group" class="editable editable-click">Admin</a></td>
                            </tr>
                            <tr>
                                <td>Select, error while loading</td>
                                <td><a href="#" id="status" data-type="select" data-pk="1" data-value="0" data-source="/#" data-title="Select status" class="editable editable-click">Active</a></td>
                            </tr>


                            <tr>
                                <td>Combodate (date)</td>
                                <td><a href="#" id="dob" data-type="combodate" data-value="1984-05-15" data-format="YYYY-MM-DD" data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY" data-pk="1" data-title="Select Date of birth" class="editable editable-click">15/05/1984</a></td>
                            </tr>
                            <tr>
                                <td>Combodate (datetime)</td>
                                <td><a href="#" id="event" data-type="combodate" data-template="D MMM YYYY  HH:mm" data-format="YYYY-MM-DD HH:mm" data-viewformat="MMM D, YYYY, HH:mm" data-pk="1" data-title="Setup event date and time" class="editable editable-click editable-empty">Empty</a></td>
                            </tr>



                            <tr>
                                <td>Textarea, buttons below. Submit by <i>ctrl+enter</i></td>
                                <td><a href="#" id="comments" data-type="textarea" data-pk="1" data-placeholder="Your comments here..." data-title="Enter comments" class="editable editable-pre-wrapped editable-click">awesome user!</a></td>
                            </tr>
                            <tr>
                                <td>Checklist</td>
                                <td><a href="#" id="fruits" data-type="checklist" data-value="2,3" data-title="Select fruits" class="editable editable-click">peach<br>apple</a></td>
                            </tr>

                            <tr>
                                <td>Select2 (tags mode)</td>
                                <td><a href="#" id="tags" data-type="select2" data-pk="1" data-title="Enter tags" class="editable editable-click">html, javascript</a></td>
                            </tr>

                            <tr>
                                <td>Select2 (dropdown mode)</td>
                                <td><a href="#" id="country" data-type="select2" data-pk="1" data-value="BS" data-title="Select country" class="editable editable-click">Bahamas</a></td>
                            </tr>

                            <tr>
                                <td>Custom input, several fields</td>
                                <td><a href="#" id="address" data-type="address" data-pk="1" data-title="Please, fill address" class="editable editable-click"><b>Moscow</b>, Lenina st., bld. 12</a></td>
                            </tr>
                            </tbody>
                        </table>
                        </div>
                    </div>
                </div>
        </section>
    </div>
</div>






<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.slimscroll.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/tinycolor-min.js"></script>
<script src="js/bootstrap.colorpickersliders.min.js"></script>
<script src="js/jquery.typeahead.min.js"></script>
<script src="js/treeview.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/icheck.min.js"></script>
<script src="js/select2.js"></script>
<script src="js/wysihtml5-0.3.0.js"></script>
<script src="js/bootstrap-wysihtml5.js"></script>
<script src="js/moment.js"></script>

<script src="js/bootstrap-editable.min.js"></script>
<script src="js/address.js"></script>
<script src="js/prettify.js"></script>
<script src="js/jpswitch.js"></script>
<script src="js/rating.js"></script>
<script src="js/jpripple.js"></script>
<script src="js/bootstrap-submenu.js"></script>
<script src="js/jquery.tagsinput.min.js"></script>
<script src="js/all.js"></script>
<script>
    $(document).ready(function(){
        formInit();
    });
</script>
</body>
</html>